먼지위키:문법 도움말/심화 (r6 문단 편집)

현재 진행 중인 사용자 토론이 있습니다.
[오류!] 편집 권한이 부족합니다. 로그인된 사용자(이)여야 합니다. 해당 문서의 ACL 탭을 확인하시기 바랍니다.
=== [anchor(그라데이션)]텍스트 배경 그라데이션 효과 ===
{{{#red '''주의'''}}}: 정식 문법이 아니며 지원 중단 가능성이 있는 비권장 문법입니다.

{{{{{{#!wiki style="background-image: linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)"
}}}}}}
이 문법은 글자의 배경에 [[그라데이션]]을 넣는 기능입니다. (텍스트 뿐만 아니라 테이블의 셀 배경으로 적용 또한 가능함) {{{<헥스 코드 1, 2>}}} 자리에 자신이 넣고 싶은 여섯 자리의 [[헥스 코드]]들을 찾아서 입력해 주세요.

그러데이션의 여백을 조절하고 싶다면 위 문법에 {{{margin: (세로 여백 조절 숫자)px (가로 여백 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요.

그라데이션의 크기를 조절하고 싶다면 위 문법에 {{{padding: (세로 크기 조절 숫자)px (가로 크기 조절 숫자)px; }}}을 추가로 입력하여 조절해 주세요.

그러데이션의 방향을 설정하고 싶다면 {{{<to 방향>}}} 자리에 to left, to right, to top, to bottom 중에서 하나를 입력해 주세요.

 * 왼쪽에서 오른쪽: {{{to right}}}
 * 오른쪽에서 왼쪽: {{{to left}}}
 * 위에서 아래 {{{to bottom}}}
 * 아래에서 위: {{{to top}}}
 * 북동쪽 방향 대각선: {{{to top right}}} 또는 {{{to right top}}}
 * 동남쪽 방향 대각선: {{{to bottom right}}} 또는 {{{to right bottom}}}
 * 남서쪽 방향 대각선: {{{to bottom left}}} 또는 {{{to left bottom}}}
 * 북서쪽 방향 대각선: {{{to top left}}} 또는 {{{to left top}}}

그라데이션의 각도를 세세하게 조절하고 싶다면 {{{<to 방향>}}} 대신 {{{<숫자deg>}}} 문법을 사용해 보세요. {{{숫자}}} 안의 각도 숫자를 자유자재로 조절할 수 있습니다. 아래는 예시입니다.
 * 북쪽 방향: {{{0deg}}}
 * 북동쪽 방향: {{{45deg}}}
 * 동쪽 방향: {{{90deg}}}
 * 남동쪽 방향: {{{135deg}}}
 * 남쪽 방향: {{{180deg}}}
 * 남서쪽 방향: {{{225deg}}}
 * 서쪽 방향: {{{270deg}}}
 * 북서쪽 방향: {{{315deg}}}

상기의 문법을 동시에 사용한 예시입니다.
{{{{{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)"
그라데이션 기능입니다}}}}}}
{{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background-image: linear-gradient(to right, #FFB9B9, #FFFDBB)"
그라데이션 기능입니다}}}

또다른 예시입니다.

{{{{{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)"
그라데이션 기능입니다

하하하!

무지개색 총공격!}}}}}}
{{{#!wiki style="margin: -5px 0px; padding: 5px 10px; background-image: linear-gradient(135deg, #FFB9B9, #FFD3B6, #FFFDBB, #B4ECB4, #ACE1FF, #F6C3FF)"
그라데이션 기능입니다

하하하!

무지개색 총공격!}}}

[anchor(tablegra)]
표 문법 안에 넣어서 활용하는 방법도 있습니다.

{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #00A495, #13AD65)"
{{{#FFFFFF '''먼지위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} ||}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #00A495, #13AD65)"
{{{#FFFFFF '''먼지위키'''}}}[br]{{{#FFFFFF '''고유 컬러'''}}}}}} ||

헥스 코드를 여러번 입력하여 색과 색 사이의 경계를 좀 더 뚜렷하게 만들어 다양한 시도를 할 수 있습니다.
{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
{{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #AFEEEE, #AFEEEE, #AFEEEE, #4682B4, #4682B4, #4682B4, #4682B4)"
{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||

헥스 코드 바로 오른쪽에 퍼센테이지를 붙여서 각 색이 차지하는 크기 및 비율을 조절하는 방법도 있습니다.
 * {{{linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"}}}
 #AFEEEE로 시작하고, 왼쪽에서 65% 지점 이후부터 #4682B4로 전환되기 시작한 후, 왼쪽에서 80% 지점부터 순수한 #4682B4로 완전히 전환되어 종료되는 그라데이션
{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"
{{{#FFFFFF '''안녕하세요'''}}}[br][br][br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE 65%, #4682B4 80%)"
{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||

 * {{{linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"}}}
 #AFEEEE로 시작하고, 왼쪽에서 60% 지점부터 순수한 #4682B4로 완전히 전환된 후, #C0D84D로 종료되는 그라데이션
{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"
{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #AFEEEE, #4682B4 60%, #C0D84D)"
{{{#FFFFFF '''안녕하세요'''}}}[br]{{{#FFFFFF '''여러분'''}}}}}} ||

오른쪽 색상의 지정 위치가 왼쪽 색상보다 작거나 같을 경우, 그라데이션 효과가 사라지고 왼쪽 색상에 지정한 위치에서 색이 나누어집니다.
 * {{{linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)}}}
 * {{{linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)}}}
 * {{{linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)}}}
 * {{{linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 30%, #D1EAFF 0%)"
{{{#C9151E '''30%'''}}}}}}||
|| {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 58%, #D1EAFF 57%)"
{{{#C9151E '''58%'''}}}}}}||
|| {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(to right, #C9151E 70%, #D1EAFF 70%)"
{{{#C9151E '''70%'''}}}}}}||
|| {{{#!wiki style="margin: -5px -10px; padding:5px; background-image: linear-gradient(45deg, #C9151E 70%, #D1EAFF 70%)"
{{{#C9151E '''70%'''}}}}}}||

서로 다른 방향의 그라데이션을 한 표안에 원할시 linear-gradient(<to 방향>, #<헥스 코드 1>, #<헥스 코드 2>)를 중첩으로 사용해 만들 수 있습니다.
{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d, #6c5b7b, transparent 50%), linear-gradient(to top, #f8b195, #f67280, #f64d5f)"
{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||
퍼센테이지를 적용할 수 도 있습니다.
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: linear-gradient(to right, #355c7d 25%, #6c5b7b 25%, #6c5b7b 50%, transparent 50%), linear-gradient(to top, #f8b195 33%, #f67280 33%, #f67280 66%, #f64d5f 66%)"
{{{#fff '''중첩된'''}}}[br]{{{#fff '''그라데이션'''}}}}}} ||

반복되는 그라데이션을 원할시 linear-gradient앞에 repeating-을 붙여 구현할 수 있습니다.
{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%)"
{{{#0e284c '''반복 그라데이션'''}}}}}} ||}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 6%, #1f719a 12%, #2abdc3 12%, #2abdc3 18%, #fff6ee 18%, #fff6ee 24%)"
{{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 5%, #1f719a 9%, #2abdc3 9%, #2abdc3 13%, #fff6ee 13%, #fff6ee 17%)"
{{{#0e284c '''반복 그라데이션'''}}}}}} ||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: repeating-linear-gradient(45deg, #1f719a 2%, #1f719a 4%, #2abdc3 4%, #2abdc3 6%, #fff6ee 6%, #fff6ee 8%)"
{{{#0e284c '''반복 그라데이션'''}}}}}} ||

원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다.
{{{{{{#!wiki style="background-image: radial-gradient(circle at (위치)% (높이)%, #<헥스 코드 1>, #<헥스 코드 2>)"}}}
}}}
 *위치: 0%일시 원의 중심이 최좌측, 100%일시 원의 중심이 최우측
 *높이: 0%일시 원의 중심이 최상단, 100%일시 원의 충심이 최하단
예시
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 50%, #000 50%, #808080 50%)"
[br]'''{{{#fff 위치 50%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 0% 50%, #000 50%, #808080 50%)"
[br]'''{{{#fff 위치 0%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 0%, #000 50%, #808080 50%)"
[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 50%}}}'''[br][br]}}} ||
마찬가지로 위의 linear-gradient와 혼용하여 사용가능합니다.
{{{||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"
[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} || 
}}}
||<width=300px> {{{#!wiki style="margin: -5px -10px; padding: 5px 10px; background-image: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"
[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||
im preview
최근 변경

먼지위키:문법 도움말/심화 (r6 문단 편집)

최근 변경
